<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>输血管理系统销毁信息查询</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>

<body>
    <div class="data-manage-table">
        <template>
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
                <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
                <el-form-item label="销毁编号">
                    <el-input placeholder="请输入样品销毁编号" v-model="searchdestory.blood_destory_id"></el-input>
                </el-form-item>
                <el-form-item label="销毁血袋编号">
                    <el-input placeholder="请输入销毁的血袋编号" v-model="searchdestory.blood_bag_number"></el-input>
                </el-form-item>
                <el-form-item label="销毁方式">
                    <el-select v-model="searchdestory.destory_way">
                        <el-option v-for="item in destorywaylist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="销毁人员">
                    <el-input placeholder="请输入销毁人姓名" v-model="searchdestory.destory_people"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker v-model="searchdestory.destory_date" type="daterange" size="small" format="yyyy-MM-dd"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryload">搜索</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>

<!--            <el-dialog title="添加样本" center :visible.sync="dialogVisible" width="45%" @close="cancel">-->
<!--                &lt;!&ndash; 内容的主体区域 &ndash;&gt;-->
<!--                <el-form ref="form" :model="addForm" :rules="addFormRules" label-width="100px">-->
<!--                    <el-form-item label="样本编号" prop="A_blood_sample_number">-->
<!--                        <el-input v-model="addForm.A_blood_sample_number"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="血液编号" prop="Blood_number">-->
<!--                        <el-input v-model="addForm.Blood_number"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="样本状态" prop="state">-->
<!--                        <el-select v-model="addForm.state">-->
<!--                            <el-option v-for="item in desorymethod" :key="item.value" :label="item.label"-->
<!--                                :value="item.value">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="样本位置" prop="The_sample_location">-->
<!--                        <el-select v-model="addForm.The_sample_location">-->
<!--                            <el-option v-for="item in location" :key="item.value" :label="item.label"-->
<!--                                :value="item.value">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="操作人" prop="Operation_of">-->
<!--                        <el-input v-model="addForm.Operation_of"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="操作人工号" prop="Operating_manual">-->
<!--                        <el-input v-model="addForm.Operating_manual"></el-input>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                &lt;!&ndash; 底部区域 &ndash;&gt;-->
<!--                <span slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="cancel()">取 消</el-button>-->
<!--                    <el-button type="primary" @click="">确 定</el-button>-->
<!--                </span>-->
<!--            </el-dialog>-->

            <el-table :data="tableData" style="width: 100%" border
                :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                @current-change="">
<!--                <el-table-column type="selection" width="100" align="center"></el-table-column>-->

                <el-table-column prop="bloodDestoryId" label="销毁编号" width="350" align="center">
                </el-table-column>

                <el-table-column prop="bloodBagNumber" label="销毁的血袋编号" width="180" align="center">
                </el-table-column>

                <el-table-column prop="destoryDate" label="销毁日期" width="400" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.destoryDate}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="destoryWay" label="销毁方式" width="230" align="center">
                    <template slot-scope="scope">
                        {{ getdestoryWayName(scope.row.destoryWay) }}
                    </template>
                </el-table-column>
                <el-table-column prop="destoryPeopleNumber" label="销毁人工号" width="230" align="center">
                </el-table-column>
                <el-table-column prop="destoryPeople" label="销毁人" width="320" align="center">
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[1, 2, 3, 4]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="text-align: center; margin-top: 20px;"/>
        </template>
    </div>

    <script src="/plugins/vue-2.6.11/vue.js"></script>
    <script src="/js/jquery.min.js"></script>

    <!--    <script src="../plugins/element-2.4.5/index.js"></script>-->
    <script src="/js/2.15.12/index.js"></script>
    <link href="/css/2.15.12/index.min.css" rel="stylesheet">
    <script src="/js/httpVueLoader.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/plugins/axios-0.27.2/axios.min.js"></script>

    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
    <script>
        (function () {
            let urlBase = "/destory"
            var vm = window.vm = new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        size: '',
                        destoryDate:"",
                        currentRow: null,
                        pageNum: 1,
                        pageSize: 1,
                        total: 0,
                        logoTextShow: true,
                        //样本状态选择
                        options: [],
                        //销毁方式
                        destorywaylist: [],
                        //样本位置
                        location: [{
                            value: '选项1',
                            label: '检验科'
                        }, {
                            value: '选项2',
                            label: '输血科'
                        }],

                        //弹出框显示
                        dialogVisible: false,

                        //搜索样本信息
                        searchdestory: {
                            blood_destory_id:'',//销毁编号
                            blood_bag_number:'',//空血袋编号
                            //destory_people_number:'',//销毁人编号
                            destory_way:'',//销毁方式
                            destory_people:'',//销毁人
                            destory_date:'',//销毁日期
                        },

                        //表格信息
                        tableData: [],

                        //新增样本信息
                        addForm: {
                            A_blood_sample_number: '',
                            Blood_number: '',
                            state: '',
                            The_sample_location: '',
                            Operation_of: '',
                            Operating_manual: ''
                        },

                        //新增样本表单验证
                        addFormRules: {
                            A_blood_sample_number: [
                                { required: true, message: '请输入样本编号', trigger: 'blur' },
                            ],
                            Blood_number: [
                                { required: true, message: '请输入血液编号', trigger: 'blur' },
                            ],
                            state: [
                                { required: true, message: '请选择样本状态', trigger: 'change' },
                            ],
                            The_sample_location: [
                                { required: true, message: '请选择样本位置', trigger: 'change' },
                            ],
                            Operation_of: [
                                { required: true, message: '请输入操作人', trigger: 'blur' },
                            ],
                            Operating_manual: [
                                { required: true, message: '请输入操作人工号', trigger: 'blur' },
                            ]
                        }
                    }
                },
                created(){
                    this.load1();


                },
                mounted() {
                    this.getRecycleState();
                    this.getDestoryWay();
                },
                methods: {
                    //加载销毁信息
                    load1(){
                        axios.get('/destory/normal/query',{
                            params: {
                                pageNum: this.pageNum,
                                pageSize: this.pageSize,
                            }
                        }).then(res => {
                            console.log(this.pageNum)
                            console.log(res)
                            console.log(this.pageSize)
                            this.tableData = res.data.records
                            console.log(this.tableData)
                            this.total = res.data.total
                        })
                    },
                    //条件查询
                    queryload(){
                        let dateval1=this.searchdestory.destory_date
                        for(let i =0 ; i<dateval1.length ; i++){
                            if(dateval1[i] instanceof Date)
                                console.log("11")

                        }
                        let startTime = dateval1[0]
                        let endTime = dateval1[1]
                        console.log("-----"+endTime)
                        // $.ajax({
                        //     url:urlBase+"/page"
                        // })
                        axios.get(urlBase+"/normal/queryload",{
                            params: {
                                pageNum: this.pageNum,
                                pageSize: this.pageSize,
                                blood_destory_id: this.searchdestory.blood_destory_id,
                                destoryPeople: this.searchdestory.destory_people,
                                bloodBagNumber:this.searchdestory.blood_bag_number,
                                destoryWay:this.searchdestory.destory_way,
                                startTime: startTime,
                                endTime: endTime,
                            }
                        }).then(res => {
                            console.log(res)
                            console.log("----------------------")
                            this.tableData = res.data.records
                            this.total = res.data.total

                        })
                    },
                    // 获取血袋回收状态字典
                    getRecycleState(){
                        axios.get('/BloodbagState/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.options = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中BloodbagState字段的code转换成name
                    getRecycleBagStateName(code){
                        for (var i = 0; i < this.options.length; i++) {
                            if (this.options[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.options[i].name;
                            }
                        }
                    },
                    // 获取销毁方式状态字典
                    getDestoryWay(){
                        axios.get('/DestoryWay/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.destorywaylist = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中destoryway字段的code转换成name
                    getdestoryWayName(code){
                        for (var i = 0; i < this.destorywaylist.length; i++) {
                            if (this.destorywaylist[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.destorywaylist[i].name;
                            }
                        }
                    },
                    //清空搜索框
                    reset(){
                        this.searchdestory.blood_destory_id = ""
                        this.searchdestory.blood_bag_number=""
                        this.searchdestory.destory_way=""
                        this.searchdestory.destory_people=""
                        this.searchdestory.destory_date=""
                        this.load1()
                    },
                    //分页查询
                    handleSizeChange(pageSize) {
                        this.pageSize = pageSize;
                        console.log(pageSize)
                        this.load1();
                    },
                    handleCurrentChange (pageNum) {
                        this.pageNum = pageNum;
                        console.log(pageNum)
                        this.load1();
                    },
                    handleEdit(index, row) {
                        console.log(index, row);
                    },
                    handleDelete(index, row) {
                        console.log(index, row);
                    },
                    //取消按钮
                    cancel(){
                        this.addForm.A_blood_sample_number = ''
                        this.addForm.Blood_number = ''
                        this.addForm.state = ''
                        this.addForm.The_sample_location = ''
                        this.addForm.Operation_of = ''
                        this.addForm.Operating_manual = ''
                        this.dialogVisible = false
                    }
                }

            });
        })()
    </script>

</body>

</html>